<!DOCTYPE html>

<html>
    
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no" /> 
        <meta name="apple-mobile-web-app-capable" content="yes" /> 
        <meta charset="utf-8">
        
        <title>六星占術</title>
        <style>
            canvas {
                border: solid 1px #000000 ;
            }
        </style>
            
        <script>
            var $id = function(id) { return document.getElementById(id); };
            Date.prototype.getProgDay = function(base)
            {
                var dayms = 24*60*60*1000;
                var base = base || new Date(1970, 0, 1);
                return Math.floor( (this.getTime()-base.getTime())/dayms )+1;
            };
            
            var LIFE_BOARD = ["種子","緑生","立花","健弱","達成","乱気","再開","財成","安定","陰影","停止","減退"];
            var OFFSET = {
                "金星人（＋）": {
                    "year"  : 2,
                    "month" : 3,
                    "date"  : 6,
                },
                "金星人（－）": {
                    "year"  : 0,
                    "month" : 0,
                    "date"  : 0,
                },
            };
            
            window.onload = function()
            {
                setInfo("金星人（＋）", new Date());
                
                var changeInfo = function() { setInfo( $id("jin").value, new Date($id("date").value) ); };
                
                $id("jin").onchange = changeInfo;
                $id("date").onchange = changeInfo;
            };
            
            var setInfo = function(jin, d)
            {
                $id("year").innerHTML   = LIFE_BOARD[ (d.getYear()    + OFFSET[jin].year)  % 12 ];
                $id("month").innerHTML  = LIFE_BOARD[ (d.getMonth()   + OFFSET[jin].month) % 12 ];
                $id("day").innerHTML    = LIFE_BOARD[ (d.getProgDay() + OFFSET[jin].date)  % 12 ];
            };
        </script>
    </head>
    
    <body>
        
        <h1>六星占術</h1>
        
        <label>星人: 
            <select id="jin">
                <option>金星人（＋）</option>
                <option>金星人（－）</option>
            </select>
        </label><br />
        <label>日時 : <input type="date" id="date" /></label>
        
        <p>年運 : <span id="year"></span></p>
        <p>月運 : <span id="month"></span></p>
        <p>日運 : <span id="day"></span></p>
        
        <table border=1>
            <tr>
                <th>春</th>
                <td>種子</td>
                <td>緑生</td>
                <td>立花</td>
            </tr>
            <tr>
                <th>夏</th>
                <td>健弱</td>
                <td>達成</td>
                <td>乱気</td>
            </tr>
            <tr>
                <th>秋</th>
                <td>再開</td>
                <td>財成</td>
                <td>安定</td>
            </tr>
            <tr>
                <th>冬</th>
                <td>陰影</td>
                <td>停止</td>
                <td>減退</td>
            </tr>
        </table>
        
    </body>
    
</html>
